<template>
  <div>
    <el-table
      :size="size"
      border
      :data="!pagination?.localPage?tableData:tableData.filter((ele,i)=>{
        return i>=(paging.current-1)*paging.size && i<(paging.current-1)*paging.size+paging.size
      })" 
      style="width: 100%" 
      :height="height" 
      class="main-table"
      @select="select"
      @select-all="selectAll"
      v-loading="loading"
    >
      <template v-for="(ele,i) in columns">
        <!-- 这是表格第一列的checkbox 和序号的 -->
        <el-table-column :key="i+'-0'" :align="ele.align||'center'" :type="ele.type" :width="ele.width" v-if="ele.type" :label="ele.title" :fixed="ele.fixed||false" v-bind="ele.attrs" />
        <!-- 这是普通的 -->
        <el-table-column :key="i+'-1'" :prop="ele.dataIndex" :label="ele.title" :min-width="ele.width" v-if="!ele.render?.length&&!ele.type" :align="ele.align||'center'" :fixed="ele.fixed||false" :show-overflow-tooltip="ele.showOverflowTooltip||showOverflowTooltip" />
        <!-- 这是写render自定义-->
        <el-table-column :key="i+'-2'" :prop="ele.dataIndex" :label="ele.title" :width="ele.width" v-if="ele.render?.length&&!ele.type" :align="ele.align||'center'" :fixed="ele.fixed||false" :show-overflow-tooltip="ele.showOverflowTooltip||showOverflowTooltip">
          <template #default="{ row }">
            <div class="components">
              <div
                v-for="(item,ii) in ele.render"
                class="components_item"
                :key="ii" 
                v-show="item.isHide? !item?.isHide(row):true"
              >
                <component 
                  :is="item.isName" 
                  :row="row"
                  @click="item.click && item.click(row)"
                  :type="item.type"
                  :size="item?.sizi||'mini'"
                  :icon="item.icon||''"
                >
                  {{ typeof item.text ==='string'?item.text:item.text(row) }}
                </component>
              </div>
            </div>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div class="pagination" v-if="showPagination">
      <el-pagination
        :disabled="loading"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-size="paging.size"
        :total="!pagination?.localPage?paging.total:tableData?.length"
        :page-sizes="paging.pageSizes"
        :current-page="paging.current"
        @size-change="sizeChange"
        @current-change="currentChange"
      />
    </div>
  </div>
</template>

<script setup>
/**
 * pagination:{
 * localPage:true, //本地分页
 * }
 * 
*/
import { defineProps, reactive, watch, computed } from 'vue'
import _ from 'lodash'
const props = defineProps({
  data: Array,
  columns: Array,
  pagination: {
    type: Object,
    default: ()=>{ return {} }
  },
  showPagination: {
    type: Boolean,
    default: true
  },
  height: {
    type: String,
    default: null
  },
  loading: {
    type: Boolean,
    default: false
  },
  size: {
    type: String,
    default: ''
  },
  showOverflowTooltip: {
    type: Boolean,
    default: true
  }
})

const tableData = computed(() => props.data)
const emits = defineEmits(['select', 'select-all'])

const paging = reactive({
  pageSizes: [10, 20, 30, 40, 50],
  total: 0, //总条数
  current: 1, //当前页
  size: 10//每页多少条
})
const sizeChange = (_v) => {
  paging.size = _v
  if (props?.pagination?.onChange)props.pagination?.onChange({ page: paging.current, pageNum: paging.current, pageSize: paging.size, limit: paging.size })
}
const currentChange = (_v) => {
  paging.current = _v
  if (props?.pagination?.onChange)props.pagination?.onChange({ page: paging.current, pageNum: paging.current, pageSize: paging.size, limit: paging.size })
}
const select = (_selection, _row) => {
  let selection = _.cloneDeep(_selection)?.map((ele) => {
    for (const key in ele) {
      delete ele[key + '__isshow']
      delete ele[key + '__isKey']
    }
    return ele
  })
  let row = { ..._row }
  for (const key in row) {
    delete row[key + '__isshow']
    delete row[key + '__isKey']
  }
  props.columns.find((ele) => ele.type).click && props.columns.find((ele) => ele.type).click(selection, row)
  emits('select', selection, row)
}
const selectAll = (_selection) => {
  let selection = _.cloneDeep(_selection)?.map((ele) => {
    for (const key in ele) {
      delete ele[key + '__isshow']
      delete ele[key + '__isKey']
    }
    return ele
  })
  emits('select-all', selection)
  props.columns.find((ele) => ele.type).click && props.columns.find((ele) => ele.type).click(selection)
}

watch(()=>props.pagination, () => {
  if (props?.pagination) {
    Object.keys(props.pagination).forEach(ele => {
      paging[ele] = props.pagination[ele]
    })
  }
}, { deep: true })

</script>
<style lang="scss">
  .components {
    display: flex;
    justify-content: space-around;
    .components_item {
      margin-right: 5px;
    }
  }
</style>
